<template>
  <a-spin :spinning="uploading" tip="上传中...">
    <div class="uplaodBoxB page-miH page-bgBack">
      <a-row class="head">
        <div style="cursor: pointer" @click="goback">
          <a-icon type="left" />
          <div class="left2">返回</div>
        </div>
        <a-col class="title">
          <strong>批量导入合同</strong>
        </a-col>
      </a-row>
      <div style="display: flex; padding: 0 12px">
        <div class="ant-upload-select-text-box" style="padding-top: 24px" v-if="!callback">
          <a-upload ref="upload" accept=".xls, .xlsx, .xlsm" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
            <img :src="uploadImg" style="width: 139px; height: 106px" />
            <div class="ant-modal-body">
              <div style="font-size: 12px; color: #666">点击添加文件或将文件拖拽到此处</div>
              <div style="font-size: 12px; color: #999">(文件大小不超过5M)</div>
            </div>
            <a-button style="margin-bottom: 15px" type="primary"><a-icon type="plus" />上传电子合同</a-button>
          </a-upload>
        </div>
        <div class="ant-upload-select-text-box" style="padding-top: 24px" v-if="!callback">
          <a-upload ref="upload" accept=".xls, .xlsx, .xlsm" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload2">
            <img :src="uploadImg" style="width: 139px; height: 106px" />
            <div class="ant-modal-body">
              <div style="font-size: 12px; color: #666">点击添加文件或将文件拖拽到此处</div>
              <div style="font-size: 12px; color: #999">(文件大小不超过5M)</div>
            </div>
            <a-button style="margin-bottom: 15px" type="primary"><a-icon type="plus" />上传纸质合同</a-button>
          </a-upload>
        </div>
      </div>
      <div class="tipBox" v-if="!callback">
        <a-row style="color: #252525; font-size: 16px; font-weight: 500"> 温馨提示 </a-row>
        <a-row>
          <a-col :span="12">
            <span style="padding-right: 5px"> 首先下载标准模板，填写信息后再上传 </span>
            <a-button type="link" @click="download(1)" class="primary_color" style="font-size: 12px">点击下载电子合同模板</a-button>
            <a-button type="link" @click="download(2)" class="primary_color" style="font-size: 12px">点击下载纸质合同模板</a-button>
            <!-- <div>1.支持WPS、excel2003以上版本文件</div> -->
            <div class="rowMargin">1、请导入花名册已有员工的合同信息</div>
            <div class="rowMargin">2、纸质合同如需上传附件请回花名册合同信息中单独上传</div>
            <div class="rowMargin">3、身份证号是必填项，系统通过身份证号确认员工。</div>
            <div class="rowMargin">4、若字段为下拉选项，单元格的内容只能在支持的选项值内；不在范围内的单元格内容无法导入。</div>
            <div class="rowMargin">5、若Excel文件设有权限密码，需取消Excel文件密码，否则系统无法识别。</div>
          </a-col>
        </a-row>
      </div>
      <div v-if="callback">
        <div style="padding-left: 24px; padding-right: 24px">
          <div
            style="
              margin-top: 15px;
              padding-left: 10px;
              display: flex;
              flex-flow: row;
              align-items: center;
              height: 35px;
              width: 100%;
              background-color: #fffbe6;
              border-style: solid;
              border-color: #ffe58f;
              border-width: 1px;
              border-radius: 5px;
            "
          >
            <img style="width: 16px; height: 16px; margin-right: 5px" src="../../../assets/icons/重复.png" />
            <span sytle="color:#55565D;font-size:14px;"
              >共{{ count }}条数据，成功导入{{ succ }}条数据，<label class="redc">{{ fial }}</label
              >条数据导入失败。</span
            >
          </div>
        </div>
        <div class="header-title-box">
          <div class="headerTitle">
            <div class="block" />
            <div style="font-size: 15px; font-weight: 700; font-color: #252525">
              {{ importState === 1 ? "电子合同导入" : "纸质合同导入" }}错误信息
            </div>
          </div>
          <div class="btn-box">
            <a-button :disabled="!downloadurl" type="primary" @click="buCha"> 导出错误数据 </a-button>
          </div>
        </div>
        <a-table
          v-if="importState === 1"
          style="padding-left: 24px; padding-right: 24px"
          :columns="columnDetail"
          :pagination="pagination"
          :data-source="dataDetail"
          :scroll="{ x: 800 }"
          @change="handleTableChange"
        >
          <template slot="reason" slot-scope="text">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ text }}</span>
              </template>
              <span style="color: #ff0000">{{ text }}</span>
            </a-tooltip>
          </template>
          <template slot="name" slot-scope="text, record">
            <span v-if="record.field === 'name'" style="color: #ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="idCard" slot-scope="text, record">
            <span v-if="record.field === 'idCard'" style="color: #ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="empName" slot-scope="text, record">
            <span v-if="record.field === 'empName'" style="color: #ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="phone" slot-scope="text, record">
            <span v-if="record.field === 'phone'" style="color: #ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <!-- <template slot="startTime" slot-scope="text">
            <span>{{ text ? moment(text).format("YYYY-MM-DD") : "--" }}</span>
          </template>
          <template slot="endTime" slot-scope="text">
            <span>{{ text ? moment(text).format("YYYY-MM-DD") : "--" }}</span>
          </template> -->
          <template slot="type" slot-scope="text">
            <span>{{ text ? typeList[text] : "--" }}</span>
          </template>
          <template slot="remark" slot-scope="text, record">
            <span v-if="record.field === 'remark'" style="color: #ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="tag" slot-scope="text, record">
            <span v-if="record.field === 'tag'" style="color: #ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
        </a-table>
        <a-table
          v-if="importState === 2"
          style="padding-left: 24px; padding-right: 24px"
          :columns="columnDetail2"
          :pagination="pagination"
          :data-source="dataDetail"
          :scroll="{ x: 800 }"
          @change="handleTableChange"
        >
          <template slot="reason" slot-scope="text">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ text }}</span>
              </template>
              <span style="color: #ff0000">{{ text }}</span>
            </a-tooltip>
          </template>
          <template slot="name" slot-scope="text, record">
            <span v-if="record.field === 'name'" style="color: #ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="idCard" slot-scope="text, record">
            <span v-if="record.field === 'idCard'" style="color: #ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="phone" slot-scope="text, record">
            <span v-if="record.field === 'phone'" style="color: #ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <!-- <template slot="startTime" slot-scope="text">
            <span>{{ text ? moment(text).format("YYYY-MM-DD") : "--" }}</span>
          </template>
          <template slot="endTime" slot-scope="text">
            <span>{{ text ? moment(text).format("YYYY-MM-DD") : "--" }}</span>
          </template> -->
          <template slot="type" slot-scope="text">
            <span>{{ text ? typeList[text] : "--" }}</span>
          </template>
          <template slot="remarks" slot-scope="text">
            <span>{{ text ? text : "--" }}</span>
          </template>
          <template slot="status" slot-scope="text">
            <span>{{ ["执行中", "已到期", "未执行"][text - 1] }}</span>
          </template>
        </a-table>
      </div>

      <a-modal v-model="dialogFailVisible" title="批量导入" width="500px" @ok="handleFailClose">
        <template slot="footer">
          <a-button key="submit" type="primary" @click="handleFailClose"> 确定 </a-button>
        </template>
        <div style="padding-left: 10px; display: flex; flex-flow: row; align-items: center; height: 35px; width: 100%">
          <img style="width: 25px; height: 25px; margin-right: 10px" src="../../../assets/icons/duihao.png" />
          <div style="color: #3c3d43; font-size: 15px; font-weight: 700">共{{ count }}条数据，全部导入成功！</div>
        </div>
      </a-modal>
    </div>
  </a-spin>
</template>
<script>
import UploadMixin from "xqjr-plugin-common/UploadOrExport/uploadMixin";
import moment from "moment";
const mixin = new UploadMixin();
const formalType = ["试用", "正式", "实习"];
const typeList = {
  laborContractLimit: "固定期限劳动合同",
  laborContractUnlimit: "无固定期限劳动合同",
  laborContractJobs: "以完成一定工作任务为期限的劳动合同",
  internAccords: "实习协议",
  laborContract: "劳务合同",
  reemployAccords: "返聘协议",
  laborContractDispatch: "劳务派遣合同",
  borrowedContract: "借调合同",
  partTime: "兼职合同",
  engagementLetter: "约定书",
  noviciateAgreement: "见习协议",
  dimissionContract: "离职合同",
  retireReEmploy: "退休返聘合同",
  other: "其它"
};
const columnDetail2 = [
  {
    title: "错误信息",
    dataIndex: "reason",
    fixed: "left",
    scopedSlots: { customRender: "reason" },
    ellipsis: true,
    width: 260
  },
  {
    title: "员工姓名",
    dataIndex: "empName",
    scopedSlots: { customRender: "empName" },
    ellipsis: true,
    width: 120
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    scopedSlots: { customRender: "idCard" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同名称",
    dataIndex: "name",
    scopedSlots: { customRender: "name" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同编号",
    dataIndex: "number",
    scopedSlots: { customRender: "number" },
    ellipsis: true,
    width: 200
  },

  {
    title: "合同类型",
    dataIndex: "type",
    scopedSlots: { customRender: "type" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同开始时间",
    dataIndex: "startTimeStr",
    scopedSlots: { customRender: "startTimeStr" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同结束时间",
    dataIndex: "endTimeStr",
    scopedSlots: { customRender: "endTimeStr" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同期限",
    dataIndex: "termStr",
    scopedSlots: { customRender: "termStr" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同公司",
    dataIndex: "companyName",
    scopedSlots: { customRender: "companyName" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同签订日期",
    dataIndex: "subscribeTimeStr",
    scopedSlots: { customRender: "subscribeTimeStr" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同备注",
    dataIndex: "remarks",
    scopedSlots: { customRender: "remarks" },
    ellipsis: true,
    width: 200
  }
];
const columnDetail = [
  {
    title: "错误信息",
    dataIndex: "reason",
    fixed: "left",
    scopedSlots: { customRender: "reason" },
    ellipsis: true,
    width: 260
  },
  {
    title: "员工姓名",
    dataIndex: "empName",
    scopedSlots: { customRender: "empName" },
    ellipsis: true,
    width: 120
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    scopedSlots: { customRender: "idCard" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同名称",
    dataIndex: "name",
    scopedSlots: { customRender: "name" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同类型",
    dataIndex: "type",
    scopedSlots: { customRender: "type" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同开始时间",
    dataIndex: "startTimeStr",
    scopedSlots: { customRender: "startTimeStr" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同结束时间",
    dataIndex: "endTimeStr",
    scopedSlots: { customRender: "endTimeStr" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同期限",
    dataIndex: "termStr",
    scopedSlots: { customRender: "termStr" },
    ellipsis: true,
    width: 200
  },
  {
    title: "合同备注",
    dataIndex: "remark",
    scopedSlots: { customRender: "remark" },
    ellipsis: true,
    width: 200
  }
];
import axios from "axios";
import qs from "qs";
export default {
  mixins: [mixin],
  data() {
    return {
      moment,
      typeList,
      importState: 1,
      columnDetail2,
      count: 0,
      succ: 0,
      fial: 0,
      formalType,
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1,
        showQuickJumper: true
      },
      dataDetail: [],
      callback: false,
      dialogFailVisible: false,
      downloadurl: undefined,
      columnDetail,
      uploadImg: require("@/assets/img/uploadImg.png"),
      params: {
        templateName: "empContract.xlsx"
      },
      params2: {
        templateName: "empPaperContract.xlsx"
      },
      url: `/hr/api/v1/excel/template/download`,
      excelName: "电子合同模板.xlsx",
      excelName2: "纸质电子合同模板.xlsx"
    };
  },

  created() {
    const companyId = this.$store.state.hr.companyId;
    this.action = `/hr/api/v1/empContracts/importFile?companyId=${companyId}&force=false`;
    this.action2 = `/hr/api/v1/empPaperContracts/importFile?companyId=${companyId}&force=false`;
  },
  methods: {
    beforeUpload(file) {
      if (this.fileList.length > 0) {
        this.$message("最多只能上传一个");
        return false;
      }
      this.fileList = [...this.fileList, file];
      if (this.fileList && this.fileList.length > 0) {
        const { fileList } = this;
        const formData = new FormData();
        fileList.forEach((file) => {
          formData.append("file", file);
        });
        this.uploading = true;

        axios({
          url: this.action,
          method: "post",
          data: formData,
          headers: this.headers
        }).then((res) => {
          this.reset();
          this.handleSuccess(res.data);
          this.uploading = false;
          this.importState = 1;
        });
      } else {
        this.reset();
        this.handleUploadError();
      }
      return false;
    },
    beforeUpload2(file) {
      if (this.fileList.length > 0) {
        this.$message("最多只能上传一个");
        return false;
      }
      this.fileList = [...this.fileList, file];
      if (this.fileList && this.fileList.length > 0) {
        const { fileList } = this;
        const formData = new FormData();
        fileList.forEach((file) => {
          formData.append("file", file);
        });
        this.uploading = true;

        axios({
          url: this.action2,
          method: "post",
          data: formData,
          headers: this.headers
        }).then((res) => {
          this.reset();
          this.handleSuccess(res.data);
          this.uploading = false;
          this.importState = 2;
        });
      } else {
        this.reset();
        this.handleUploadError();
      }
      return false;
    },
    download(e) {
      const token = this.$store.state.auth.token;

      if (e === 1) {
        axios({
          url: this.url,
          params: this.params,
          paramsSerializer: (param) => {
            return qs.stringify(param, { indices: false });
          },
          method: "get",
          responseType: "blob",
          headers: {
            token: token
          }
        })
          .then((res) => {
            const link = document.createElement("a");
            const blob = new Blob([res.data], {
              type: "application/vnd.ms-excel"
            });
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            link.setAttribute("download", this.excelName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          })
          .catch((err) => {
            console.log("debug log --> ", err);
          });
      } else if (e === 2) {
        axios({
          url: this.url,
          params: this.params2,
          paramsSerializer: (param) => {
            return qs.stringify(param, { indices: false });
          },
          method: "get",
          responseType: "blob",
          headers: {
            token: token
          }
        })
          .then((res) => {
            const link = document.createElement("a");
            const blob = new Blob([res.data], {
              type: "application/vnd.ms-excel"
            });
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            link.setAttribute("download", this.excelName2);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          })
          .catch((err) => {
            console.log("debug log --> ", err);
          });
      }
    },
    getRegType(regType) {
      if (regType === 1) {
        return "城镇户口";
      } else if (regType === 2) {
        return "农村户口";
      } else if (regType === 3) {
        return "居民户口";
      }
    },
    buCha() {
      const token = this.$store.state.auth.token;
      window.open(this.downloadurl + `?token=${token}`);
    },
    handleUploadError() {
      this.$message.warning("没有文件");
    },
    handleFailClose() {
      this.dialogFailVisible = false;
      this.uploading = false;
      this.goback();
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
    },
    showFaild(numAll, numSuc, numFail, Faildata, downloadurl) {
      this.count = numAll;
      this.succ = numSuc;
      this.fial = numFail;
      this.dataDetail = Faildata;
      if (this.count === this.succ) {
        this.dialogFailVisible = true;
      } else {
        this.callback = true;
      }
      this.downloadurl = downloadurl;
      console.log("22222222222");
    },
    getMaritalStatus(maritalStatus) {
      if (maritalStatus === 1) {
        return "已婚";
      } else if (maritalStatus === 2) {
        return "未婚";
      } else if (maritalStatus === 3) {
        return "离异";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.header-title-box {
  padding-left: 24px;
  padding-right: 24px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerTitle {
    display: flex;
    justify-content: flex-start;
    .block {
      width: 3px;
      height: 20px;
      margin-top: 2px;
      background-color: var(--primary);
      margin-right: 12px;
    }
  }
}
.uplaodBoxB {
  padding-bottom: 24px;
  .head {
    background-color: #fff;
    .anticon-left {
      z-index: 3;
      left: 24px;
      position: absolute;
      color: #595959;
      font-size: 20px;
      margin-top: 21px;
      color: #c0c0c0;
    }
    .left2 {
      z-index: 3;
      left: 45px;
      position: absolute;
      font-size: 14px;
      cursor: pointer;
      color: #c0c0c0;
    }
    font-size: 16px;
    color: #000;
    font-weight: 500;
    text-align: center;
    line-height: 60px;
    height: 60px;
    border-bottom: 1px solid #e8e8e8;
  }
  .exportTitle {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #252525;
  }
  .left2 {
    z-index: 3;
    left: 50px;
    position: absolute;
    color: #595959;
    font-size: 14px;
  }
  .anticon-left {
    z-index: 3;
    left: 24px;
    position: absolute;
    color: #d8d8d8;
    font-size: 26px;
    margin-top: 17px;
  }
  .tipBox {
    line-height: 18px;
    background: #faf9f9;
    border-radius: 4px;
    font-size: 12px;
    color: #595959;
    margin: 0 24px;
    padding: 12px;
    height: 185px;
  }
  .rowMargin {
    margin-top: 4px;
  }
  .ant-upload-select-text-box {
    width: 100%;
    border: 1px dashed #b8b8b8;
    background: #fff;
    margin: 24px 12px 24px 12px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    padding: 12px;
  }
  .ant-upload-select-text-box ::v-deep .ant-upload-list {
    display: none;
  }
  .ant-upload-list-item-name {
    text-align-last: left;
  }

  .anticon-upload {
    font-size: 40px;
  }

  .ant-modal-body {
    line-height: 20px;

    em {
      color: var(--primary);
      font-style: normal;
    }
  }
}
.redc {
  color: red;
}
</style>
